<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <h2>{{name}}</h2>
    <div v-for="(item,index) in todolist" :style="{background:(item.done ? 'red':'transparent')}">
      <input type="checkbox" :checked="item.done" @click="fn(item,index)">
      <span>{{item.text}}</span>
      <span>X</span>
    </div>
    <hr>
    <div v-for="(value,key,index) in user">
      <span>{{index}}</span>
      <span>{{key}}</span>
      <span>{{value}}</span>
    </div>
    <hr>
    <div v-for="(num,index) in 5">
      <span>{{index}}</span>
      <span>{{num}}</span>
    </div>
  </div>
  <script>
    let vm = new Vue({
      el: "#app",
      data() {
        return {
          name: "码路",
          todolist: [{
            id: 1,
            text: "学习vue1",
            done: true
          },
          {
            id: 2,
            text: "学习vue2",
            done: false
          },
          {
            id: 3,
            text: "学习vue3",
            done: false
          },
          ],
          user: {
            name: "ml",
            age: 18,
            scrore: 10
          }
        }
      },
      methods: {
        fn(item, index) {
          this.todolist[index].done = !this.todolist[index].done;
        }
      },
    });
  </script>

</body>

</html>